{% extends "main.html" %}

{% block header %}
<title>{{ title }}</title>
<link rel="stylesheet" href="/md/static/md/css/md.css">
{% endblock %}

{% block content %}
<body class="mdui-appbar-with-toolbar">

<div class="mdui-drawer mdui-drawer-close" id="drawer">
    {% include "user_status.html" %}
    <ul class="mdui-list">
        <li class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons">library_books</i>
            <div class="mdui-list-item-content"><a href="/md/books">我的书架</a></div>
        </li>
        <li class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons">directions_run</i>
            <div class="mdui-list-item-content"><a href="/md/similar_user">书友推荐</a></div>
        </li>
        <li class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons">book</i>
            <div class="mdui-list-item-content"><a href="/md/bookmarks">我的书签</a></div>
        </li>
        <li class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons">favorite</i>
            <div class="mdui-list-item-content"><a href="/md/book_list">我的书单</a></div>
        </li>
        <li class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons">notifications</i>
            <div class="mdui-list-item-content"><a href="/md/noti_book">新书提醒</a></div>
        </li>
        <li class="mdui-subheader">设置</li>
        <li class="mdui-list-item mdui-ripple mdui-list-item-active">
            <i class="mdui-list-item-icon mdui-icon material-icons">settings</i>
            <div class="mdui-list-item-content"><a href="/md/setting">个人设置</a></div>
        </li>
        <!--<li class="mdui-list-item mdui-ripple">-->
        <!--<i class="mdui-list-item-icon mdui-icon material-icons">security</i>-->
        <!--<div class="mdui-list-item-content">修改密码</div>-->
        <!--</li>-->
        <li class="mdui-list-item mdui-ripple">
            <i class="mdui-list-item-icon mdui-icon material-icons">feedback</i>
            <div class="mdui-list-item-content">
                <a target="_blank" href="https://github.com/howie6879/owllook/issues/9">我要反馈</a>
            </div>
        </li>
    </ul>
</div>

{% include "toolbar.html" %}

<div class="mdui-container-fluid">
    <div class="mdui-panel mdui-panel-fluid" id="panel">
        <div class="mdui-panel-item">
            <div class="mdui-panel-item-header">
                <div class="mdui-panel-item-title">用户名</div>
                <div class="mdui-panel-item-summary">{{user}}</div>
                <i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
            </div>
            <div class="mdui-panel-item-body">
                <p class="mdui-text-color-black-icon">用户名无法更改</p>
            </div>
        </div>
        <div class="mdui-panel-item" id="item-email">
            <div class="mdui-panel-item-header">
                <div class="mdui-panel-item-title">邮箱</div>
                <div id="owl-email" class="mdui-panel-item-summary">{{email}}</div>
                <i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
            </div>
            <div class="mdui-panel-item-body">
                <div class="mdui-textfield mdui-textfield-floating-label">
                    <label class="mdui-textfield-label">请输入新邮箱</label>
                    <input class="mdui-textfield-input" name="email" type="email"/>
                    <div class="email-error"></div>
                </div>
                <div class="mdui-panel-item-actions">
                    <button id="email-close" class="mdui-btn mdui-ripple">cancel</button>
                    <button id="emailSubmitBtn" class="mdui-btn mdui-ripple">save</button>
                </div>
            </div>
        </div>
        <div class="mdui-panel-item" id="item-pass">
            <div class="mdui-panel-item-header">
                <div class="mdui-panel-item-title">修改密码</div>
                <div class="mdui-panel-item-summary">*******</div>
                <i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
            </div>
            <div class="mdui-panel-item-body">
                <div class="mdui-textfield mdui-textfield-floating-label">
                    <label class="mdui-textfield-label">请输入原密码</label>
                    <input class="mdui-textfield-input" name="old_pass" type="password"/>
                    <label class="mdui-textfield-label">请输入新密码</label>
                    <input class="mdui-textfield-input" name="new_pass" type="password" required/>
                    <div class="mdui-textfield-error">密码至少 6 位</div>
                    <label class="mdui-textfield-label">请再次输入新密码</label>
                    <input class="mdui-textfield-input" name="new_pass1" type="password"/>
                    <div class="pass-error"></div>
                </div>
                <div class="mdui-panel-item-actions">
                    <button id="pass-close" class="mdui-btn mdui-ripple">cancel</button>
                    <button id="passSubmitBtn" class="mdui-btn mdui-ripple">save</button>
                </div>
            </div>
        </div>
        <div class="mdui-panel-item">
            <div class="mdui-panel-item-header">
                <div class="mdui-panel-item-title">注册时间</div>
                <div class="mdui-panel-item-summary">{{register_time}}</div>
                <i class="mdui-icon material-icons">access_time</i></div>
        </div>
    </div>
    {% include "is_login.html" %}
</div>
{% endblock %}
{% block script %}
<script src="/md/static/md/js/setting.js"></script>
{% endblock %}